<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="Thymeleaf">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>spu管理</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <style>
        .layui-table-cell {
            font-size:14px;
            padding:0 5px;
            height:auto;
            overflow:visible;
            text-overflow:inherit;
            white-space:normal;
            word-break: break-all;
            text-align: center;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 9px 15px;
            width: 60px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }
        .bar_ware_list_a{
            color: rgb(8,163,164);
        }
        .layui-laypage {
            display: inline-block;
            display: inline;
            zoom: 1;
            vertical-align: middle;
            margin: 10px 0;
            font-size: 0;
            float: right;
        }
    </style>
</head>
<body>

<table id="wares_list" lay-filter="wares_list"></table>

<script type="text/html" id="toolbarWareList">
    <form class="layui-form" action="">
        <div class="layui-inline">
            <label class="layui-form-label">分类</label>
            <div class="layui-input-inline">
                <input type="text" name="classification" style="display: none;" />
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-inline">
                <select id="brand" name="brand" lay-verify="" lay-search>
                    <option value="">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select id="status" name="status" lay-verify="" lay-search>
                    <option value="">请选择</option>
                    <option value="0">上架</option>
                    <option value="1">下架</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">检索</label>
            <div class="layui-input-inline">
                <input type="text" id="search_text" name="search_text" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" onclick="serachFun()">查询</button>
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="barWareList">
    <a href="javascript:void(0);" class="bar_ware_list_a">规格</a>
</script>

<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" ></script>
<script src="../lib/layui-v2.5.5/layui.js" ></script>
<script>
    layui.config({
        base: '../js/ext/'
    }).extend({
        cascader: 'cascader_v0/cascader'
    }).use(['layer', 'table', 'element', 'form', 'cascader'], function(){
        layer = layui.layer;
        table = layui.table;
        form = layui.form;
        cascader = layui.cascader;
        $ = layui.$;

        //动态渲染品牌选择框
        function dynamicRenderingBrandSelectionBox(){
            $.ajax({
                url:'/product/brand/list',
                type:'get',
                async:false,
                success:function(r){
                    brandLists=r.data;
                    for(var i = 0; i<brandLists.length; i++){
                        $("#brand").append("<option value=\""+brandLists[i].brandId+"\">"+brandLists[i].name+"</option>");
                    }
                    form.render('select');
                }
            });
        }

        //获取分类的数据
        function getClassificationData(){
            var classificationList = [];
            $.ajax({
                url:'/product/pmscategory/list/tree',
                type:'get',
                async:false,
                success:function(r){
                    classificationList=r.data;
                }
            });
            return classificationList;
        }

        //渲染分类级联
        function renderClassificationCascade(){
            cas  = cascader.render({
                elem: $('input[name=classification]')[0],
                showAllLevels: true,
                props: {
                    label: 'name',
                    value: 'catId',
                    children: 'children',
                    fid: 'parentCid'
                },
                options: getClassificationData()
            });
        }

        ta = table.render({
            elem: '#wares_list'
            ,height: 'full-30'
            ,url: '/spu/management/giveshelveslists' //数据接口
            ,toolbar: '#toolbarWareList' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: false
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,groups: 3 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
            }
            ,done: function(res, curr, count){
                dynamicRenderingBrandSelectionBox();
                renderClassificationCascade();
            }
            ,cols: [
                [
                    {type: 'checkbox'}
                    ,{field: 'id', title:'id'}
                    ,{field: 'spuName', title: '名称'}
                    ,{field: 'spuDescription', title: '描述'}
                    ,{field: 'catalog', title: '分类'}
                    ,{field: 'brand', title: '品牌'}
                    ,{field: 'weight', title: '重量'}
                    ,{field: 'publishStatus', title: '上架状态', templet: function(d){
                        /**
                         * publishStatus==0
                         * 上架
                         * publishStatus==1
                         * 下架
                         */
                        if(d.publishStatus == 1)
                            return '<input type="checkbox" name="'+d.id+'" lay-skin="switch" lay-text="上架|下架" lay-filter="updatePublishStatus" checked>';
                        else
                            return '<input type="checkbox" name="'+d.id+'" lay-skin="switch" lay-text="上架|下架" lay-filter="updatePublishStatus">';
                    }}
                    ,{field: 'createTime', title: '创建时间'}
                    ,{field: 'updateTime', title: '修改时间'}
                    ,{title: '操作', toolbar: '#barWareList'}
                ]
            ]
        });

        //处理上下架请求
        form.on('switch(updatePublishStatus)', function(obj){
            let id = obj.elem.name;
            let status = obj.elem.checked ? 1 : 0;
            var formData = new FormData();
            formData.append("id",id);
            formData.append("publishStatus",status);

            $.ajax({
                url: "/spu/management/updateshelvespublishstatus",
                type: "POST",
                data:formData,
                cache:false,         //不设置缓存
                processData: false,  // 不处理数据
                contentType: false,   // 不设置内容类型
                success:function(r){
                    if(r.code == 0) ;
                    else if(r.code == 500){
                        layer.msg(r.msg,{icon:2});
                    }
                },
                error:function(){layer.msg('网络异常',{icon:2});}
            });
        });
    });

    function serachFun() {
        var classificationIdStr = cas.getSelectedValue()[0]==undefined ? null : cas.getSelectedValue()[0].split(',');
        var classificationId = classificationIdStr==null ? null : classificationIdStr[classificationIdStr.length-1];
        var brandId = $('#brand option:selected').val();
        var status = $('#status option:selected').val();
        var search_text = $('#search_text').val();

        ta.reload({
            where: { //设定异步数据接口的额外参数，任意设
                classificationId: classificationId
                ,brandId: brandId
                ,status: status
                ,search_text: search_text
            }
        });
    }
</script>
</body>
</html>
